﻿<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Demo</title>
    <link href="../css/html5reset.css" rel="stylesheet" type="text/css" />
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    <link href="../css/main.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="html5.js"></script>
<script src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
    function draw() {
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            // Draw Rectangle
            ctx.fillStyle = "rgb(255,0,0)";
            ctx.fillRect(10, 10, 100, 100);
            // Draw Circle
            ctx.fillStyle = "rgb(0,255,0)";
            ctx.beginPath();
            ctx.arc(125, 100, 50, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.closePath();
            // Draw Custom Shape With Lines
            ctx.fillStyle = "rgb(0,0,255)";
            ctx.beginPath();
            ctx.moveTo(125, 100);
            ctx.lineTo(175, 50);
            ctx.lineTo(225, 150);
            ctx.fill();
            ctx.closePath();
            // Draw Image From External File
            var myImage = new Image();
            myImage.onload = function () {
            ctx.drawImage(myImage, 220, 10);
            }
            myImage.src = "../img/ip4.jpg";

            // Bezier curves example
           
            ctx.beginPath();
            ctx.moveTo(75, 40);
            ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
            ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
            ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
            ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
            ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
            ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
            ctx.fill();

            /*
           
            //var c = document.getElementById("myCanvas");
            //var cxt = c.getContext("2d");
            cxt.fillStyle = "#FF0000";
            cxt.beginPath();
            cxt.arc(170, 118, 15, 0, Math.PI * 2, true);
            cxt.closePath();
            cxt.fill();

            //var canvas = document.getElementById("myCanvas");
            //var ctx = canvas.getContext("2d");
            var cyc = 100;
            ctx.fillStyle = "#000";
            var loadingPosition = new Vector2(200, 200);
            var loadingRadius = 50;
            var intervalAngle = 45;
            var bigCircleRadius = 8;
            var bigCirclePosition = new Vector2(200, 150);
            function drawLoading() {
            for (var i = 0; i < 11; i++) {
            ctx.beginPath();
            ctx.arc(bigCirclePosition.x, bigCirclePosition.y, bigCircleRadius, 0, Math.PI * 2, true);
            ctx.closePath();
            ctx.fill();
            bigCircleRadius -= 1;
            bigCirclePosition.rotateSelf(loadingPosition, 30);
            }
            }
            CANVASLOOP = setInterval(function () {
            bigCircleRadius = 10;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawLoading();
            }, 50);
            */
        }
    }


</script>
<style type="text/css">
canvas {
border: 5px solid #ccc;
background: #000;
}
</style>
</head>
<body onload="draw();">
<header>
<h1>HTML5 Canvas Demo</h1>
</header>
<figure>
<canvas id="mycanvas" width="500" height="300">Fallback content, in case
the browser does not support Canvas.</canvas>
<figcaption>Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)</figcaption>
</figure>
</body>
</html>